<template>
  <div>
    <my-header-2></my-header-2>
    <my-header-1></my-header-1>
    <div class="list">
      <div
        class="item"
        v-for="item in arr"
        :key="item.id"
        :style="{
          background: 'url(' + item.video.imgUrl + ')',
          'background-size': 'cover',
        }"
      >
        <div class="title">{{ item.title }}</div>
        <div class="video-info">
          <div class="avatar"><img :src="item.user.avatarurl" alt="" /></div>
          <div class="user-name">{{ item.user.nickName }}</div>
          <div class="like-icon"><img src="" alt="" /></div>
          <div class="like-count">{{ item.upCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader1 from "../components/MyHeader1.vue";
import MyHeader2 from "../components/MyHeader2.vue";

export default {
  name: "SmallVideo",
  components: {
    MyHeader1,
    MyHeader2,
  },
  data() {
    return {
      arr: [],
    };
  },
  async created() {
    let res = await this.$axios.get(
      "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=4BD02870EB8A11EC9484CD3F2669A797DC32D9AD09E2495099517F7338AC2AD0&channelId=4&feedChannelId=105&timestamp=1658493810597&offset=10"
    );
    this.arr = res.data.data.feeds;
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 10rem;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 4.9333rem;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .title {
      width: 4.5333rem;
      height: 1.12rem;
      margin: 0px 8px;
      font-size: 15px;
      color: #fff;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .video-info {
      width: 4.5333rem;
      height: 0.5733rem;
      margin: 0px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: #fff;
      .avatar {
        width: 21.5px;
        height: 21.5px;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .user-name {
        width: 78.5px;
        height: 19.5px;
        margin: 0px 6px;
      }
      .like-icon {
        width: 0.48rem;
        height: 0.48rem;
        background: url("@/assets/img/up.png") no-repeat 0;
        background-size: 0.5rem 0.5rem;
      }
      .like-count {
        width: 0.9867rem;
        height: 19.5px;
      }
    }
  }
}
</style>